<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
	<block v-else>
		<view class="container">
			<block v-if="customList.length > 0">
				<view class="listBox">
					<block v-for="(item, index) in customList" :key="index">
						<view class="item" @click="toggleSelection(item, index)">
							<view class="labels">
								<view class="labelImg">
									<image :src="defAddressImg(item)" mode=""></image>
								</view>

								<view class="border">
									<view class="customer">
										<view class="left">
											<view class="customer_name">
												{{ item.TrueName || item.Accepter }}
											</view>
										</view>

										<view class="edit" @click.stop="setAddress(item)">编辑</view>
									</view>

									<view class="phone">
										<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17219756605381404.png" mode=""></image>
										<view class="tel">
											{{ item.Phone }}
										</view>
									</view>

									<view class="phone position">
										<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17219756639191392.png" mode=""></image>
										<view class="tel">
											{{ item.Province }}{{ item.City }}{{ item.Area || ''}}{{ item.Address }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</block>

			<block v-else>
				<EmptyBox
					image="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721977846162417.png"
					text="还没地址信息哦~"
				></EmptyBox>
			</block>
		</view>

		<view class="saveBox">
			<view class="btn addBtn" @click="nav_to(`/pages/Myaddress/addAddress?i=${customList.length}`)">
				<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721975666899758.png" mode="widthFix"></image>
				添加地址
			</view>

			<view class="btn confirmBtn" @click="confirmSelection" v-if="type==1">确认选择</view>
		</view>
	</block>
</template>

<script>
export default {
	data() {
		return {
			load: false,
			customList: [],
			isMore: true, //是否还有更多
			PageIndex: 1, //页码
			PageSize: 30,
			selectedCustomers: [], // 存储被选中的地址信息
			type:0
		};
	},

	computed: {
		submitCustomers() {
			return this.customList.find((item) => item.isSelected);
		},
	},
	watch: {},

	async onLoad(e) {
		this.type = e.type || 0
	},

	async onShow() {
		this.PageIndex=1
		this.fetchData();
	},

	methods: {
		// 获取地址列表
		async fetchData() {
			const res = await this.$api.post('UserAddress/MyAddress', {
				PageIndex: this.PageIndex, // 页码
				PageSize: this.PageSize, // 一页数量
			});
			if (res.code == 0) {
				const newList = res.data.map((item) => ({
					...item,
					isSelected: item.IsDefault==0 ? false : true,
				}));

				this.customList = this.PageIndex == 1 ? newList : this.customList.concat(newList);

				this.load = true;
			}

			this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
		},

		// 点击选中地址
		toggleSelection(item, index) {
			this.customList.forEach(item=>item.isSelected=false)
			this.customList[index].isSelected = true
		},

		// 勾选的图片
		defAddressImg(item) {
			let noImg = 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17225829987891181.png';
			let yesImg = 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1722582976430634.png';
			return item.isSelected ? yesImg : noImg;
		},

		// 编辑地址
		setAddress(item) {
			this.$store.commit('setAddressMsg', item);
			this.nav_to('/pages/Myaddress/editAddress');
		},

		// 确认选择
		confirmSelection() {
			// 先做个空判断
			if (this.submitCustomers.length == 0) {
				this.$pv.msg('请选择地址');
				return;
			}

			uni.$emit('select', this.submitCustomers);
			uni.navigateBack()
		},
	},

	onReachBottom() {
		if (this.isMore) {
			this.PageIndex++;
			this.fetchData();
		}
	},
};
</script>

<style lang="scss">
page {
	// height: 100%;
	background: #f6f6f6;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;

	.head {
		width: 100%;
		height: 98rpx;
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;

		.searchBox {
			width: 93%;
			height: 72rpx;
			background: #f6f6f6;
			border-radius: 36rpx;
		}
	}

	.listBox {
		width: 100%;
		padding: 15rpx 24rpx;
	}

	.item {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-top: 15rpx;
		padding: 0 25rpx;
		width: 100%;

		.company {
			display: flex;
			align-items: center;
			height: 88rpx;
			border-bottom: 1rpx solid #ececec;
			// opacity: 0.5;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 5rpx;
			}

			.company_name {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.labels {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// border-bottom: 1rpx solid #ECECEC;
			padding: 26rpx 0;

			.labelImg {
				width: 36rpx;
				height: 36rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.border {
				width: 90%;

				.customer {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						display: flex;
						// justify-content: space-between;
						align-items: center;

						.customer_name {
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
						}

						.customer_position {
							font-size: 20rpx;
							color: #ff6030;
							background: #fff3f0;
							border-radius: 4rpx;
							height: 32rpx;
							line-height: 32rpx;
							margin-left: 15rpx;
							padding: 0 8rpx;
						}
					}

					.edit {
						font-size: 24rpx;
						color: #333333;
						width: 96rpx;
						height: 48rpx;
						background: #f6f6f6;
						border-radius: 24rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.phone {
					display: flex;
					margin: 10rpx 0;

					image {
						width: 32rpx;
						height: 32rpx;
						margin: 5rpx 8rpx 0 0rpx;
					}

					.tel {
						font-size: 28rpx;
						color: #666666;
						width: 87%;
						display: flex;
					}
				}
			}

			.border:last-child {
				border-bottom: none;
			}
		}
	}
}

.saveBox {
	position: fixed;
	width: 100%;
	height: 158rpx;
	box-sizing: border-box;
	left: 0;
	bottom: 0;
	padding: 20rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-evenly;

	.addBtn {
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		border: 2rpx solid #ff6030;
		background-color: #fff;
		color: #ff6030;
		font-size: 32rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}
	}

	.confirmBtn {
		margin-left: 24rpx;
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		border: none;
		background: linear-gradient(98deg, #ffad26 0%, #fe4e01 100%);
		font-weight: bold;
		font-size: 32rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.btn {
	letter-spacing: 1px;
}
</style>
